<template>
  <div>
    <div class="box-group">
      <el-tabs v-model="active1">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in list1.slice(0,1)"
                     :key="index">
          <div class="contianer">
            <div class="chuzu">
              <div class="chuzulist first">
                <div v-for="(item,index) in shopAd" @click="godetail(item,2)" :key="index"
                     style="position: relative;flex: 0 0 24%;height: 168px;margin-right: 10px;
      margin-bottom: 10px;">
                  <img :src="item.shPic?item.shPic:upDefaultCover" alt style="height: 168px" @error="errorImage"/>
                  <p class="cardc-title-other">
                    <span>写字楼出租</span>
                    <span style="height: 1px;background: #fff;width: 20px;margin:10px 0;"></span>
                    <span>20000/月</span>
                  </p>
                  <div class="cover">
                    <div class="cover-header">
                      <p class="title1">
                        花样年家天下办公室
                        带装修出租...
                      </p>
                      <span style=""></span>
                      <p class="title2">转让费：面议</p>
                      <p class="title3">面积：200㎡</p>
                    </div>
                  </div>
                </div>
              </div>
              <!--<div class="chuzulist chuzuWid" @click="godetail(shopAd[0],2)" v-if="shopAd.length>0" style="height: 345px;margin-right: 0">
                <img
                  :src="shopAd[0].shPic=='undefined' || shopAd[0].shPic==''?upDefaultCover:shopAd[0].shPic"
                  alt
                />
                <p class="cardc-title-other">
                  <span>写字楼出租</span>
                  <span>20000/月</span>
                </p>
              </div>-->
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="more" @click="gosearch">更多</div>
    </div>
    <div class="box-group">
      <el-tabs v-model="active2">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in list2.slice(0,1)"
                     :key="index">
          <div class="contianer">
            <div class="chuzu">
              <!--<div class="chuzulist chuzuWid" @click="godetail(shopAd[0],2)" v-if="shopAd.length>0">
                <img
                  :src="shopAd[0].shPic=='undefined' || shopAd[0].shPic==''?upDefaultCover:shopAd[0].shPic"
                  alt
                />
                <p class="cardc-title">{{shopAd[0].reName}}</p>
              </div>-->
              <div class="chuzulist">
                <div v-for="(item,index) in tourAd" @click="godetail(item,2)" :key="index"
                     style="flex: 0 0 24%;position: relative;margin-right: 10px;
      margin-bottom: 10px;">
                  <img :src="item.shPic?item.shPic:upDefaultCover" alt @error="errorImage"/>
                  <p class="cardc-title title-hover">{{item.reName}}</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="more" @click="gosearch">更多</div>
    </div>
    <!--<div class="contianer">
      <div class="leftTitle">
        <div>
          <label>美食餐饮</label>
          <span>/ 超过10万条有效生意转让</span>
        </div>
        <p @click="gosearch">查看全部生意转让></p>
      </div>
      <div class="zhuanrang">
        <div class="chuzulist">
          <div
            class="boxlist"
            v-for="(item,index) in yamiAd"
            @click="godetail(item,1)"
            :key="index"
          >
            &lt;!&ndash; <img :src="item.shPic?item.shPic:upDefaultCover" alt /> &ndash;&gt;
            <el-image
              :src="item.shPic=='undefined' || item.shPic==''?upDefaultCover:item.shPic"
              lazy
            ></el-image>
            <div class="cardc">
              <p>{{item.reName}}</p>
              <div>转让费：{{item.attornPrice=='null'?'面议':item.attornPrice / 10000 +'万元'}}</div>
              &lt;!&ndash; <div>月租金：{{item.rentPrice=='0'?'面议':item.rentPrice / 10000 +'万元'}}</div>&ndash;&gt;
              <div>面积：{{item.shAcreage}}㎡</div>
            </div>
          </div>
          <div class="textAd" v-if="yamiAdFont.length>0">
            <div
              class="textItem"
              v-for="(item,index) in yamiAdFont"
              :key="index"
              @click="godetail(item,1)"
            >{{item.reName}}{{item.shAcreage}}㎡
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="contianer">
      <div class="leftTitle">
        <div>
          <label>美容美发</label>
          <span>/ 超过10万条有效生意转让</span>
        </div>
        <p @click="gosearch">查看全部生意转让></p>
      </div>
      <div class="zhuanrang">
        <div class="chuzulist">
          <div
            class="boxlist"
            v-for="(item,index) in hearAd"
            @click="godetail(item,1)"
            :key="index"
          >
            <el-image
              :src="item.shPic=='undefined' || item.shPic==''?upDefaultCover:item.shPic"
              lazy
            ></el-image>
            <div class="cardc">
              <p>{{item.reName}}</p>
              <div>转让费：{{item.attornPrice=='null'?'面议':item.attornPrice / 10000 +'万元'}}</div>
              <div>月租金：{{item.rentPrice=='0'?'面议':item.rentPrice / 10000 +'万元'}}</div>
              <div>面积：{{item.shAcreage}}㎡</div>
            </div>
          </div>
          &lt;!&ndash;<div class="textAd" v-if="hearAdFont.length>0">
            <div
              class="textItem"
              v-for="(item,index) in hearAdFont"
              :key="index"
              @click="godetail(item,1)"
            >{{item.reName}}{{item.shAcreage}}㎡</div>
          </div>&ndash;&gt;
        </div>
      </div>
    </div>-->
    <div class="box-group">
      <el-tabs v-model="active3">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in list3.slice(0,1)"
                     :key="index">
          <div class="contianer">
            <div class="zhuanrang">
              <div class="chuzulist">
                <div
                  class="boxlist"
                  v-for="(item,index) in yamiAd"
                  @click="godetail(item,1)"
                  :key="index"
                  style="flex: 0 0 24%"
                >
                  <el-image
                    :src="item.shPic=='undefined' || item.shPic==''?upDefaultCover:item.shPic"
                    lazy
                  >  <img slot="error" src="../../../static/img/quesheng.jpg"/></el-image>
                  <div class="cardc">
                    <p>{{item.reName}}</p>
                    <div>
                      <div>转让费：{{item.attornPrice=='null'?'面议':item.attornPrice / 10000 +'万元'}}</div>
                      <!--<div>月租金：{{item.rentPrice=='0'?'面议':item.rentPrice / 10000 +'万元'}}</div>-->
                      <div>面积：{{item.shAcreage}}㎡</div>

                    </div>
                  </div>
                </div>
                <!--<div class="textAd" v-if="tourAdFont.length>0">
                  <div
                    class="textItem"
                    v-for="(item,index) in tourAdFont"
                    :key="index"
                    @click="godetail(item,1)"
                  >{{item.reName}}{{item.shAcreage}}㎡</div>
                </div>-->
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="more" @click="gosearch">更多</div>
    </div>
    <div class="box-group">
      <el-tabs v-model="active4">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in list4.slice(0,1)"
                     :key="index">
          <div class="contianer">
            <div class="zhuanrang">
              <div class="chuzulist">
                <div
                  class="boxlist"
                  v-for="(item,index) in hearAd"
                  @click="godetail(item,1)"
                  :key="index"
                  style="flex: 0 0 24%"
                >
                  <el-image
                    :src="item.shPic=='undefined' || item.shPic==''?upDefaultCover:item.shPic"
                    lazy
                  >
                    <img slot="error" src="../../../static/img/quesheng.jpg"/>
                  </el-image>
                  <div class="cardc">
                    <p>{{item.reName}}</p>
                    <div>
                      <div>转让费：{{item.attornPrice=='null'?'面议':item.attornPrice / 10000 +'万元'}}</div>
                      <!-- <div>月租金：{{item.rentPrice=='0'?'面议':item.rentPrice / 10000 +'万元'}}</div>-->
                      <div>面积：{{item.shAcreage}}㎡</div>
                    </div>
                  </div>
                </div>
                <!--<div class="textAd" v-if="happyAdFont.length>0">
                  <div
                    class="textItem"
                    v-for="(item,index) in happyAdFont"
                    :key="index"
                    @click="godetail(item,1)"
                  >{{item.reName}}{{item.shAcreage}}㎡</div>
                </div>-->
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="more" @click="gosearch">更多</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shopAd: [],
        hearAd: [],
        yamiAd: [],
        tourAd: [],
        happyAd: [],
        comprehensiveAd: [],
        comprehensiveAdFont: [],
        happyAdFont: [],
        tourAdFont: [],
        yamiAdFont: [],
        hearAdFont: [],
        list1: [
          {
            label: '热门推荐',
            name: '1'
          },
          {
            label: '餐饮',
            name: '2'
          },
          {
            label: '生活服务',
            name: '3'
          },
          {
            label: '美容美发',
            name: '4'
          },
          {
            label: '酒店住宿',
            name: '5'
          },
          {
            label: '超市便利',
            name: '6'
          },
          {
            label: '服饰鞋包',
            name: '7'
          }
        ],
        list2: [
          {
            label: '超市便利',
            name: '1'
          },
          {
            label: '零售超市',
            name: '2'
          },
          {
            label: '办公用品',
            name: '3'
          },
          {
            label: '干货杂货',
            name: '4'
          },
          {
            label: '母婴用品',
            name: '5'
          },
          {
            label: '床上用品',
            name: '6'
          },
          {
            label: '烟酒茶叶',
            name: '7'
          },
          {
            label: '玩具',
            name: '8'
          },
          {
            label: '眼镜',
            name: '9'
          },
          {
            label: '乐器',
            name: '10'
          }
        ],
        list3: [
          {
            label: '餐饮',
            name: '1'
          },
          {
            label: '西餐',
            name: '2'
          },
          {
            label: '中餐',
            name: '3'
          },
          {
            label: '食堂',
            name: '4'
          },
          {
            label: '快餐',
            name: '5'
          },
          {
            label: '小吃',
            name: '6'
          },
          {
            label: '面包',
            name: '7'
          },
          {
            label: '甜品',
            name: '8'
          },
          {
            label: '水果',
            name: '9'
          },
          {
            label: '冷饮',
            name: '10'
          },
          {
            label: '咖啡',
            name: '11'
          },
          {
            label: '茶艺',
            name: '12'
          }
        ],
        list4: [
          {
            label: '服饰鞋包',
            name: '1'
          },
          {
            label: '服装',
            name: '2'
          },
          {
            label: '内衣',
            name: '3'
          },
          {
            label: '鞋子',
            name: '4'
          },
          {
            label: '箱包饰品',
            name: '5'
          }
        ],
        active1: '1',
        active2: '1',
        active3: '1',
        active4: '1',
      };
    },
    computed: {
      upDefaultCover() {
        return this.$store.state.defaultCover;
      }
    },
    created() {
      this.getshopAd();
      this.getyamiAd();
      this.gethearAd();
      this.gettourAd();
      this.gethappyAd();
      this.getComprehensive();
    },
    methods: {
      goRent() {
        window.open("/#/shangpu");
      },
      gosearch() {
        window.open("/#/findshop");
      },
      godetail(e, i) {
        window.open("/#/details" + i + "/" + e.id);
      },
      // 综合转让
      getComprehensive() {
        this.$http.get(this.$api.getAdTypeShopss(7, 10, 6)).then(res => {
          if (res.data.code === 0) {
            if (res.data.rShopss_p) {
              this.comprehensiveAd = res.data.rShopss_p;
            }
            if (res.data.rShopss_f) {
              this.comprehensiveAdFont = res.data.rShopss_f;
            }
          }
        });
      },
      gethappyAd() {
        /* 娱乐休闲 */
        this.$http.get(this.$api.getAdTypeShopss(6, 10, 6)).then(res => {
          if (res.data.code === 0) {
            if (res.data.rShopss_p) {
              this.happyAd = res.data.rShopss_p;
            }
            if (res.data.rShopss_f) {
              this.happyAdFont = res.data.rShopss_f;
            }
          }
        });
      },
      gettourAd() {
        /* 旅游宾馆 */
        this.$http.get(this.$api.getAdTypeShopss(5, 10, 6)).then(res => {
          if (res.data.code === 0) {
            if (res.data.rShopss_p) {
              this.tourAd = res.data.rShopss_p;
            }
            if (res.data.rShopss_f) {
              this.tourAdFont = res.data.rShopss_f;
            }
          }
        });
      },
      getyamiAd() {
        /* 美食餐饮 */
        this.$http.get(this.$api.getAdTypeShopss(3, 10, 6)).then(res => {
          if (res.data.code === 0) {
            if (res.data.rShopss_p) {
              this.yamiAd = res.data.rShopss_p;
            }
            if (res.data.rShopss_f) {
              this.yamiAdFont = res.data.rShopss_f;
            }
          }
        });
      },
      /* 商铺出租 */
      getshopAd() {
        this.$http.get(this.$api.getAdTypeShopss(2, 10, 0)).then(res => {
          if (res.data.code === 0) {
            this.shopAd = res.data.rShopss_p;
          }
        });
      },
      gethearAd() {
        /* 美容美发 */
        this.$http.get(this.$api.getAdTypeShopss(4, 10, 6)).then(res => {
          if (res.data.code === 0) {
            if (res.data.rShopss_p) {
              this.hearAd = res.data.rShopss_p;
            }
            if (res.data.rShopss_f) {
              this.hearAdFont = res.data.rShopss_f;
            }
          }
        });
      }
    }
  };
</script>
<style scoped lang="less">
  .contianer {
    margin: 20px 0;
  }

  .chuzu {
    display: flex;

    .chuzulist {
      display: flex;
      flex-wrap: wrap;

      .cardc-title {
        background: #000;
        width: 100%;
        color: #fff;
        height: 38px;
        text-align: left;
        padding: 0 10px;
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap; //不换行
        text-overflow: ellipsis;
        line-height: 38px;
      }

      div:hover {
        /* outline: 1px solid #ff5001;*/
      }

      div {
        cursor: pointer;


        img {
          width: 100%;
          height: 140px;
          vertical-align: middle;
        }
      }

      div:nth-child(4) {
        margin-right: 0;
      }

      div:nth-child(8) {
        margin-right: 0;
      }
    }
  }

  .zhuanrang {
    display: flex;
    justify-content: space-between;

    .chuzulist {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .cardc {
    width: 100%;
    text-align: left;
    padding: 10px;
  }

  .chuzuWid {
    position: relative;
    height: 385px;
    margin-right: 10px;
    cursor: pointer;
    overflow: hidden;

    .cardc-title {
      position: absolute;
      left: 0;
      bottom: 0;
    }

    &:hover {
      outline: 1px solid #ff5001;
    }
  }

  .leftTitle {
    width: 100%;
    padding: 20px;
    font-size: 16px;
    color: #666;
    display: flex;
    background: #eef7fe;
    justify-content: space-between;
    align-items: center;

    p {
      color: #2d8cf0;
      cursor: pointer;
      font-size: 14px;
    }

    div {
      height: 40px;

      label {
        color: #999;
        font-weight: bold;
        font-size: 20px;
      }

      border-bottom: 1px solid #666;
    }
  }

  .boxlist {
    width: 19% !important;
    margin-bottom: 15px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    margin-right: 15px;

    .el-image {
      width: 100%;
      height: 160px;
      vertical-align: middle;
    }

    transition: all 500ms;

    &:hover {
      box-shadow: 0 3px 7px 0 rgba(156, 156, 156, 0.35);
    }
  }

  .boxlist:nth-child(4) {
    margin-right: 0;
  }

  .boxlist:nth-child(8) {
    margin-right: 0;
  }

  .cardc {
    height: 60px;

    p {
      overflow: hidden;
      white-space: nowrap; //不换行
      text-overflow: ellipsis;
      font-size: 16px;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
    }

    > div {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-top: 2px;
    }
  }

  .boxlist:hover {
    /*border: 1px solid #ff5001;*/
  }

  .boxlist:hover .cardc {
    /*background: #ff5001;
    color: #fff;*/
  }

  .textAd {
    background: #ff5001;
    color: #fff;
    width: 100%;
    display: flex;
    font-size: 18px;
    padding: 10px 15px;
    justify-content: space-around;
    flex-wrap: wrap;

    div {
      text-align: left;
      line-height: 40px;
      cursor: pointer;
    }
  }

  /deep/ .el-tabs__header.is-top {
    margin: 0;
  }

  /deep/ .el-tabs__item {
    font-size: 18px;
    font-weight: 400;
    color: #222222;

    &.is-active {
      color: #E41E1D;
    }
  }

  /deep/ .el-tabs__active-bar {
    background-color: #E41E1D;
  }

  .cardc-title-other {
    width: 110px;
    height: 110px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    span {
      color: #fff;
      opacity: 1;
      line-height: 12px;
    }
  }

  .box-group {
    position: relative;

    .more {
      position: absolute;
      cursor: pointer;
      top: 15px;
      right: 10px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      display: flex;
      align-items: center;

      &:after {
        content: '';
        width: 7px;
        height: 14px;
        background: url("../../../static/img/qb_jt.png");
        display: inline-block;
        margin-left: 3px;
      }
    }
  }

  .title-hover {
    transition: all 300ms;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 10;

    &:hover {
      background: #e41e1d !important;
      height: 58px !important;
      opacity: 0.6;
    }
  }

  .cover {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 10;
    display: none;

    > div {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 212px;
      height: 148px;
      border: 1px solid rgba(255, 255, 255, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      padding: 29px 43px;
      color: #fff;
      background-color: rgba(0, 0, 0, .5);

      span {
        width: 15px;
        height: 2px;
        background: #fff;
        margin-top: 10px;
      }

      p {
        line-height: 12px;
      }

      .title1 {
        line-height: 13px;
      }

      .title2 {
        margin-top: 14px;
      }

      .title3 {
        margin-top: 10px;
      }
    }
  }

  .first > div {
    transition: all 500ms;
    &:hover .cover {
      display: block;
    }

    &:hover .cardc-title-other {
      display: none;
    }
  }
</style>
